<template>
    <v-container class="justify-start full-height">
        <p class="title white--text">
            帮助引导
        </p>
        <v-list
            subheader
        >
            <v-list-item @click="visibleDialog(1)">
                <v-list-item-content>
                    <v-list-item-title>如何打印照片</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
            <v-list-item @click="visibleDialog(2)">
                <v-list-item-content>
                    <v-list-item-title>如何打印文档</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list>
        <v-dialog v-model="dialog" width="600px">
            <v-card v-if="current === 1">
                <v-card-title>
                    <span class="headline">如何打印照片?</span>
                </v-card-title>
                <v-card-text>
                    1. 在小程序提交云图片，支持日常使用格式，选择需要的类型和要求 <br>
                    2. 浏览图片是否展示正确，提交订单生成提取码和云文件 <br>
                    3. 选择打印类型（提取码和扫码打印） <br>
                    4. 等待片刻后图片就拿到了<br>
                </v-card-text>
            </v-card>
            <v-card v-if="current === 2">
                <v-card-title>
                    <span class="headline">如何打印文档?</span>
                </v-card-title>
                <v-card-text>
                    1. 在小程序提交云文件，支持日常使用格式，选择需要的类型和要求 <br>
                    2. 浏览文件是否展示正确，提交订单生成提取码和云文件 <br>
                    3. 选择打印类型（提取码和扫码打印） <br>
                    4. 等待片刻后图片就拿到了<br>
                </v-card-text>
            </v-card>
        </v-dialog>
    </v-container>
</template>

<script>

    export default {
        name: "index",
        data() {
            return {
                dialog: false,
                current: -1
            }
        },
        watch: {
            dialog (val) {
                val || this.close()
            },
        },
        methods: {
            close () {
                this.dialog = false
            },
            visibleDialog(current) {
                this.dialog = true;
                this.current = current
            }
        }
    }
</script>

<style scoped>

</style>
